<template>
	<view class="technician-info order-pages rel" :style="{background:pageColor}" v-if="detail.id">
		<view id="box">
			<view class="switch-banner flex-center ml-lg abs" v-if="detail.self_img && detail.self_img.length">
				<view class="banner-item-text f-icontext flex-center" @tap="changeBanner(index)"
					v-for="(item,index) in ['视频', detail.life_text]" :key="index"
					:style="{color: bannerIndex == index ? `#302D2B` : `#fff`,background: bannerIndex == index ? '#fff' : ''}">
					{{item}}
				</view>
			</view>
			<view class="flex-center abs icon-right-follow" @tap.stop="toShield">
				<i class="iconfont"
					:class="[{'iconbuxihuan':!detail.is_shield, 'iconbuxihuan-xuanzhong': detail.is_shield}]"
					style="font-size: 28rpx;" :style="{color: detail.is_shield ? '#F13F26' : ''}"></i>
			</view>

			<banner :list="detail.arrBanner" indicatorType="number" indicatorStyle="right" :numberBottom="30"
				:margin="0" :autoplay="true" :height="750"
				:current="bannerIndex == 0 ? scrollType=='left' ? detail.banner.length : 0 : current"
				@change="tapChange" @swiperChange="bannerChange" v-if="detail.arrBanner.length > 0" videoBottom="180rpx"
				:showText="detail.life_icon_status ?detail.life_icon_text:''" imgMode="aspectFit">
			</banner>
			<view class="ti-box fill-base rel ti-box-top">
				<!--<image :src="`https://api.huixuananmm.com/admin/industry/service/detail-02.png`" mode="aspectFill"
					class="ti-box-bg abs"></image>-->
				<view class="ti-box-head flex-y-center pr-lg rel">
					<!--<view class="rel ti-box-header flex-center fill-base">
						<image :src="detail.work_img" mode="aspectFill"></image>
					</view>-->
					<view class="ti-content w-full">
						<view class="flex-between w-full">
							<view class="flex-y-center">
								<text
									class="pr-lg f-title ellipsis max-300 text-bold">{{detail.coach_name || '-'}}</text>
								<view class="f-icontext h40 min94 flex-center rel" style="overflow: hidden"
									v-if="detail.industry_data.birthday && detail.industry_data.age_sex">
									<view class="abs age-bg"
										:style="{background: detail.sex == 1 ? '#F72370' : '#319AFF'}"></view>
									<i class="iconfont" style="font-size: 11px;"
										:style="{color: detail.sex == 1 ? '#F72370' : '#319AFF'}"
										:class="[{'iconnan-lanse': detail.sex == 0},{'iconnv-hongse': detail.sex == 1}]"></i>
									<text :style="{color: detail.sex == 1 ? '#F72370' : '#319AFF'}"
										style="margin-left: 6rpx;">{{detail.year || 0}}</text>
								</view>
								<view class="isIcon">
									<view class="isIcon-img">
										<img src="../../static/img/technician/isAge.png" />
										<view class="isIcon-text">{{detail.year || 0}}</view>
									</view>
								</view>
								<view class="isIcon">
									<view class="isIcon-img">
										<img src="../../static/img/technician/isNew.png" />
										<view class="isIcon-text">新人</view>
									</view>
								</view>
								<view class="isIcon">
									<view class="isIcon-img">
										<img src="../../static/img/technician/isShiming.png" />
										<view class="isIcon-text">实名</view>
									</view>
								</view>
							</view>
							
							<view class="flex-y-center">
								<!--iconbuxihuan-xuanzhong-->
								<!--<i class="iconfont"
									:class="[{'iconshoucang1': !detail.is_collect},{'iconshoucang2': detail.is_collect}]"
									:style="{color: detail.is_collect ? primaryColor : ''}" style="font-size: 40rpx;"
									@tap.stop="toCollect"></i>--> <!--iconshoucang2-->
									<view class="juli">
										<view class="juli-img">
											<img src="../../static/img/technician/juli.png" />
										</view>
										<view class="juli-text">{{detail.juli || '1.8KM'}}</view>
									</view>
							</view>
						</view>
						<!--<view class="flex-y-center pt-sm">
							<view class="flex-center f-icontext ti-status mr-md c-base"
								:style="{background: configInfo.btn_config[detail.text_type*1-1].btn_color,color:configInfo.btn_config[detail.text_type*1-1].font_color}">
								{{configInfo.btn_config[detail.text_type*1-1].text}}
							</view>
							<view class="h40 f-icontext ti-time rel flex-center" v-if="detail.near_time">
								<view class="abs age-bg" :style="{background: primaryColor}"></view>
								<text :style="{color: primaryColor}">最早可约 {{detail.near_time}}</text>
							</view>
						</view>-->
					</view>
				</view>
				<view class="pingfen">
					<view class="pingfen-img">
						<img src="../../static/img/technician/pingfen.png" />
						<view class="pingfen-text">{{detail.star}}</view>
					</view>
				</view>
				<view class="count-list flex-y-center pt-sm ml-md mr-md b-1px-b rel count-list--total-top">
					<block v-for="(item,index) in countList" :key="index">
						<view class=" count-list-top"
							v-if="(item.key =='order_num' && detail.show_salenum) || (item.key == 'star' && app_model_type!=1) || item.key =='collect_num'">
							<view class="text" style="margin-right: 6rpx;">{{item.title}}</view>

							<view class="f-sm-title c-black count-list-text-top" 
								v-if="item.key == `order_num`">
								{{detail[item.key] | handleOrderNumber}}
							</view>
							<view class="f-sm-title c-black count-list-text-top" v-else
								:style="{opacity:item.key == 'star' && detail[item.key] == 0? 0: 1 }">
								{{detail[item.key]}}
							</view>
							<view class="text pt-sm" v-if="item.key == 'star' && detail[item.key] == 0">暂无评分</view>
						</view>
					</block>
					<view class="congye">
						<text class="text" style="margin-right: 6rpx;">从业</text>
						<text class="count-list-text-top">{{detail.work_time}}年</text>
					</view>
				</view>
				<view class="line-top">
				</view>
				<view class="text-top">
					<text style="word-break:break-all;">{{detail.text}}</text>
				</view>
				<view class="dangan-top">
					<img src="../../static/img/technician/dangan.png" />
				</view>
				<view class="yuyue-top">
					<view>
						<img src="../../static/img/technician/yuyue.png" class="yuyue-top-img">
					</view>
					<view class="zuizao">最早可约</view>
					<view class="keyueshijian">{{detail.near_time}}</view>
				</view>
				<!--<view class="ti-basic pl-lg pr-lg flex-y-center"
					v-if="detail.industry_show || detail.station_icon_name">
					<text class="f-caption text-bold pr-lg">基本信息</text>
					<block v-if="detail.industry_show">
						<block v-for="(item,index) in coachInfoType" :key="index">
							<view class="pr-sm pl-sm text-center radius mr-md min94 f-desc user-info-item"
								v-if="detail.industry_data[item.key]"
								:style="{color: item.color,background: item.bgColor}">
								<text class="f-caption" style="line-height: normal;">{{
										item.key == 'employment_years' ? `从业${detail.work_time}年` : detail[item.key]+(item.key == 'height'?'cm': item.key == 'weight'? 'kg' :'')
									}}</text>
							</view>
						</block>
					</block>
					<view class="pr-sm pl-sm text-center radius mr-md min94 f-desc user-info-item"
						v-if="detail.station_icon_name" :style="{color: '#06BA61',background: '#CFF5E8'}">
						<text class="f-caption" style="line-height: normal;">{{detail.station_icon_name}}</text>
					</view>
				</view>
				<view class="ti-certificate pl-lg pr-lg flex-between pt-md" v-if="detail.certificate_show"
					@tap.stop="$util.goUrl({url: `/user/pages/license-info`})">
					<view class="flex-y-center flex-1">
						<text class="f-caption text-bold pr-lg">档案证书</text>
						<view class="flex-warp flex-1">
							<block v-for="(item,index) in certificate" :key="index">
								<view class="flex-center ti-certificate-item rel pr-md"
									v-if="detail.industry_data[item.key]">
									<image class="abs ti-certificate-icon"
										:src="`https://api.huixuananmm.com/admin/industry/service/certificate.png`"
										mode="aspectFill"></image>
									<text class="f-caption">{{item.title}}</text>
								</view>
							</block>
						</view>
					</view>
					<i class="iconfont icongengduo" style="color: #7D7D7D;font-size: 10px;"></i>
				</view>-->

				<view class="ti-store pl-lg pr-lg flex-warp pt-md"
					v-if="(detail.admin_id && detail.merchant_name&&configInfo.merchant_switch_show) || (detail.store && detail.store.length>0 && configInfo.plugAuth.store)">

					<text class="f-caption text-bold pr-lg">
						<block v-if="detail.admin_id && detail.merchant_name&&configInfo.merchant_switch_show">
							商<text class="c-base">商家</text>家</block>
						<block v-else>入驻门店</block>
					</text>
					<view class="flex-1 flex-between"
						v-if="detail.admin_id && detail.merchant_name&&configInfo.merchant_switch_show">
						<view @tap.stop="$util.goUrl({url: `/user/pages/merchant-info?id=${detail.admin_id}`})"
							class="flex-center ti-store-item">
							<image class="ti-store-icon"
								:src="`https://api.huixuananmm.com/admin/industry/service/store.png`" mode="aspectFill">
							</image>
							<view class="flex-1 f-caption">{{detail.merchant_name}}</view>
						</view>
						<i class="iconfont icongengduo" style="color: #7D7D7D;font-size: 10px;"></i>
					</view>
					<view class="flex-1" v-else>
						<view class="flex-between"
							@tap.stop="$util.goUrl({url: `/shopstore/pages/detail?id=${item.id}`})"
							:class="[{'mt-md':index!=0}]" v-for="(item,index) in detail.store" :key="index">
							<view class="flex-center ti-store-item">
								<image class="ti-store-icon"
									:src="`https://api.huixuananmm.com/admin/industry/service/store.png`"
									mode="aspectFill">
								</image>
								<view class="flex-1 f-caption">{{item.title}}</view>
							</view>
							<i class="iconfont icongengduo" style="color: #7D7D7D;font-size: 10px;"></i>
						</view>
					</view>
				</view>

			</view>
			<view class="ti-dynamics flex-column rel"
				@tap="$util.goUrl({url: `/user/pages/dynamics?id=${options.id}`})" v-if="configInfo.plugAuth.dynamic">
				<image class="ti-dynamics-bg abs"
					:src="`https://api.huixuananmm.com/admin/industry/service/dynamics-bg.png`" mode="aspectFill"></image>
				<view class="flex-between rel pb-md">
					<image :src="`https://api.huixuananmm.com/admin/industry/service/dynamics-title.png`" mode="aspectFill"
						class="ti-dynamics-title"></image>
					<view class="flex-center">
						<text class="f-caption c-paragraph">查看动态</text>
						<!--<i class="iconfont icongengduo" style="color: #7D7D7D;font-size: 10px;margin-left: 6rpx;"></i>-->
					</view>
				</view>
				<view class="flex">
					<view class="f-paragraph text-bold rel">
						<text class="rel" style="z-index: 2;">“更多动态等你发现, 快来看看我吧!”</text>
						<image :src="`https://api.huixuananmm.com/admin/industry/service/dynamics-text.png`"
							mode="aspectFill" class="ti-dynamics-text abs"></image>
					</view>
				</view>
			</view>
			<!-- <view class="ti-user-introduce fill-base pl-lg pr-lg pb-lg mt-md" v-if="detail.text">
				<view class="f-title text-bold ti-user-title flex-y-center">个人介绍</view>
				<view class="pd-lg ti-user-cont rel">
					<view class="c-desc f-desc" v-if="!detail.showText">
						{{detail.text.substring(0,42) + '...'}}
					</view>
					<view v-else>
						<text decode="emsp" class="c-desc f-desc" style="word-break:break-all;">{{detail.text}}</text>
					</view>

					<view class="flex-center abs ti-user-more" @tap.stop="toShowHide('showText')"
						v-if="detail.have_show_text">
						<text class="f-caption" :style="{color: primaryColor}">{{!detail.showText?'展开':'收起'}}</text>
						<i class="iconfont" :class="[{'iconxia':!detail.showText},{'iconshang':detail.showText}]"
							:style="{color: primaryColor, fontSize: '8px'}"></i>
					</view>
				</view>
			</view> -->

		</view>

		<view class="flex-y-center pt-lg pb-lg pl-lg pr-lg nav-list" :style="{background:pageColor}" style="display: flex;justify-content: space-between;align-items: center;">
			<view style="display: flex;">
				<block v-for="(item,index) in ['选择项目', 'TA的评价']" :key="index">
					<view @click="handerTabChange(index)" v-if="(app_model_type != 1 && index == 1) || index != 1"
						class="f-mini-title c-title text-bold nav-item rel flex-center">
						<text
							:style="{color:activeIndex==index?'#333333':'#666666',fontSize:activeIndex==index?'30rpx':'30rpx',fontWeight:activeIndex==index?'500':'400'}">{{item}}</text>
						<view class="nav-line abs" :style="{background: activeIndex==index?'linear-gradient( 142deg, #A5FFA2 0%, #69DE81 54%, #58C06E 100%)':'transparent'}">
						</view>
					</view>
				</block>
			</view>
			<view style="font-size: 24rpx;color: #999;">更多项目<i class="iconfont icon-right" style="font-size: 24rpx;"></i></view>
		</view>

		<view class="pt-md" id="scroll1" v-if="activeIndex == 0">
			<!-- <view class="flex-between pt-lg pb-lg pl-lg pr-lg">
					<view class="f-paragraph c-title text-bold">选择项目</view>
				</view> -->
			<view :class="[{'flex-warp ml-md':configInfo.service_list_type===3}]">
				<view
					:class="[{'fill-base pd-lg ml-md mr-md mb-md radius-16': [1,2].includes(configInfo.service_list_type)},{'pl-md pr-md ':configInfo.service_list_type===4},{'pt-md':[4].includes(configInfo.service_list_type)&&index>0},{'mr-md':configInfo.service_list_type===3&&index%2==0},{'mt-md':configInfo.service_list_type===3&&index>1}]"
					v-for="(item,index) in serviceList" :key="index">
					<longbingbing-service-list-item @order="toOrder(index)" :info="item" :list="serviceList"
						:o="{type:configInfo.service_list_type}" from="technician-info"
						:coach_info="detail"></longbingbing-service-list-item>
				</view>
			</view>
			<abnor v-if="serviceList.length == 0"></abnor>
		</view>
		
		<view class="pl-lg pr-lg mt-md" :class="[{'fill-base':commentList.data}]"
			v-if="app_model_type != 1 " id="scroll2">
			<view style="padding: 24rpx 16rpx;" v-if="commentList.data.length > 0">
				<view class="flex-between">
					<view class="pingjia-left">TA的评价</view>
					<view class="flex-between pingjia-right">
						<view style="font-size: 24rpx;color: rgba(0,0,0,0.4);">好评率: </view>
						<view style="font-size: 24rpx;color: #FF7446;">100%</view>
						<view style="font-size: 16rpx;color: #8A8A8A;margin-left: 20rpx;"><i class="iconfont icon-right" style="font-size: 16rpx;"></i></view>
					</view>
				</view>
				<!--<view class="tags" style="display: flex;margin:  0 0 20rpx;">
					<view v-for="(item,index) in tags" :key="index" class="tags-item">{{item}}</view>
				</view> -->
			</view>
			<block v-for="(item,index) in commentList.data" :key="index">
				<view class="list-message flex-warp pt-lg pb-lg" :class="[{'b-1px-t':index!=0}]" v-if="index < 5">
					<image mode="aspectFill" class="item-avatar radius" :src="item.avatarUrl"></image>
					<view class="flex-1 ml-md">
						<view class="flex-between" style="height: 52rpx;">
							<view class="flex-y-center">
								<view class="f-paragraph c-title mr-md max-200 ellipsis">{{item.nickName}}
								</view>
								<view class="flex-warp">
									<i class="iconfont iconyduixingxingshixin icon-font-color"
										:style="{backgroundImage: aindex< item.star?`-webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%)`:`-webkit-linear-gradient(270deg, #f4f6f8 0%, #ccc 100%)`}"
										v-for="(aitem,aindex) in 5" :key="aindex"></i>
								</view>
							</view>
							<view class="f-icontext c-caption">{{item.create_time}}</view>
						</view>
						<view class="flex-warp mt-sm">
							<view class="pt-sm pb-sm pl-md pr-md mt-sm mr-sm radius fill-body f-caption c-desc"
								v-for="(item,index) in item.lable_text" :key="index">{{item}}</view>
						</view>
						<view class="f-caption c-caption mt-md">
							<text decode="emsp" style="word-break:break-all;">{{item.text}}</text>
						</view>
					</view>
				</view>
			</block>
			<view class="flex-center pt-lg pb-lg" v-if="commentList.data&&commentList.data.length > 5">
				<view class="flex-center" @tap.stop="$util.goUrl({url: `/user/pages/evaluate-list?id=${options.id}`})">
					<text class="f-caption" style="color: #8F8F8F;">查看更多</text>
					<i class="iconfont icongengduo" style="color: #8F8F8F;font-size: 10px;margin-left: 6rpx;"></i>
				</view>
			</view>
			<abnor :tip="[{text: '暂无评价数据'}]" v-if="commentList.data && commentList.data.length == 0"></abnor>
		</view>

		<view class="space-footer"></view>

		<longbingbing-technician-list-popup ref="technician_list_popup"
			from="technician-info"></longbingbing-technician-list-popup>
		<!-- #ifdef APP-PLUS -->
		<longbingbing-preview-image ref="preview_image_item"></longbingbing-preview-image>
		
		<longbingbing-app-check-auth type="phone" ref="app_check_item"
			@confirm="$util.goUrl({ url:configInfo.mobile, openType: 'call' })"></longbingbing-app-check-auth>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import longbingbingServiceListItem from "@/components/longbingbing-service-list-item.vue"
	import longbingbingTechnicianListPopup from "@/components/longbingbing-technician-list-popup.vue"
	export default {
		components: {
			longbingbingServiceListItem,
			longbingbingTechnicianListPopup,
		},
		data() {
			return {
				options: {},
				detail: {},
				serviceList: [],
				loading: true,
				countList: [{
					title: '累计接单',
					key: 'order_num'
				}, {
					title: '收藏',
					key: 'collect_num'
				}],
				coachInfoType: [{
					title: '身高',
					key: 'height',
					color: '#7E50E9',
					bgColor: '#F0EBFA'
				}, {
					title: '体重',
					key: 'weight',
					color: '#FF6121',
					bgColor: '#FEEBE7'
				}, {
					title: '星座',
					key: 'constellation',
					color: '#06BA61',
					bgColor: '#CFF5E8'
				}, {
					title: '从业',
					key: 'employment_years',
					color: '#06BA61',
					bgColor: '#CFF5E8'
				}],
				certificate: [{
					title: '营业执照',
					key: 'business_license'
				}, {
					title: '健康证',
					key: 'health_certificate'
				}, {
					title: '技能证',
					key: 'massage_certificate'
				}, {
					title: '实名认证',
					key: 'id_card'
				}, {
					title: '头像验真',
					key: 'avatar_verification'
				}],
				commentList: {},
				bannerIndex: 0,
				activeIndex: 0,
				current: 0,
				scrollType: 'right',
				scroll: {
					0: 0,
					1: 0
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			this.options = options
			this.initIndex()
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			uni.setNavigationBarTitle({
				title: this.$t('action.attendantName') + '详情'
			})
		},
		// async onPageScroll(e) {
		// 	console.log(e, '======> onPageScroll')
		// 	if (this.app_model_type != 1 && this.scroll[1]) {
		// 		if (this.scroll[1] - 62 >= e.scrollTop) {
		// 			this.activeIndex = 0
		// 		} else {
		// 			this.activeIndex = 1
		// 		}
		// 	} else {
		// 		this.activeIndex = 0
		// 	}
		// },
		// #ifdef H5
		destroyed() {
			// #endif
			// #ifndef H5
			onUnload() {
					// #endif 
					this.updateUserItem({
						key: 'appShare',
						val: true
					})
				},
				onPullDownRefresh() {
					// #ifndef APP-PLUS
					uni.showNavigationBarLoading()
					// #endif
					this.initRefresh()
					uni.stopPullDownRefresh()
				},
				filters: {
					handleOrderNumber(val) {
						let text = val
						if (val > 9999) {
							let num = val % 10000
							let num1 = parseInt(val / 10000)
							if (num) {
								text = `${num1}w+`
							} else {
								text = `${num1}w`
							}
						}
						return text
					}
				},
				methods: {
					...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo']),
					...mapMutations(['updateTechnicianItem', 'updateUserItem']),
					async initIndex() {
						await this.getDetail()
						await this.getList()
						await this.getCommentList()
						setTimeout(() => {
							this.changeScroll()
						}, 600)
						// #ifdef H5
						this.$jweixin.hideOptionMenu()
						// #endif
					},
					initRefresh() {
						this.initIndex(true)
					},
					// 评论列表
					async getCommentList() {
						let {
							id: coach_id,
						} = this.options
						let newList = await this.$api.service.commentList({
							page: 1,
							coach_id
						});
						newList.data.map(item => {
							let have_show_text = item.text.length > 100
							item.have_show_text = have_show_text
							item.showText = !have_show_text
						})
						this.commentList = newList
						this.loading = false
						this.$util.hideAll()
					},
					async getDetail() {
						let {
							id
						} = this.options
						let data = await this.$api.service.coachInfo({
							id
						})
						let {
							industrytype
						} = this.configInfo.plugAuth
						if (data.industry_data) {
							if (industrytype == 1) {
								data.industry_data.business_license = 0
								data.industry_data.health_certificate = 0
							}
							if (industrytype == 1 || data.industry_data.type == 1) {
								data.industry_data.age_sex = 0
							}
							if (industrytype == 2 || data.industry_data.type == 2) {
								data.industry_data.age_sex = 1
							}
						}
						data.banner = data.video ? [{
							jump_type: 'video',
							img: data.work_img,
							jump_url: data.video
						}] : [{
							img: data.work_img
						}]
						data.arrBanner = data.banner.concat(data.self_img)
						let have_show_text = data.text.length > 42
						data.have_show_text = have_show_text
						data.showText = !have_show_text
						data.industry_show = 0
						data.certificate_show = 0
						data.star = (data.star * 1).toFixed(1)
						Array.from(['employment_years', 'height', 'weight', 'constellation']).map(item => {
							if (data.industry_data[item]) {
								data.industry_show = 1
							}
						})
						Array.from(['business_license', 'health_certificate', 'massage_certificate', 'id_card',
							'avatar_verification'
						]).map(item => {
							if (data.industry_data[item]) {
								data.certificate_show = 1
							}
						})
						let {
							store_id = 0,
								store_name = '',
								store: dstore = []
						} = data
						data.store = dstore && dstore.length > 0 ? dstore : store_id && store_name ? [{
							id: store_id,
							title: store_name
						}] : []
						this.detail = data
					},
					async getList() {
						let {
							id: coach_id
						} = this.options
						let {
							data
						} = await this.$api.service.coachServiceList({
							coach_id
						});
						this.serviceList = data
						this.$util.hideAll()
					},
					async toShield() {
						let {
							id
						} = this.options
						await this.$api.mine.shieldCoachAdd({
							type: 2,
							coach_id: id
						})
						this.updateUserItem({
							key: 'haveShieldOper',
							val: 2
						})
						this.$util.back()
						this.getMineInfo()
						setTimeout(() => {
							this.$util.goUrl({
								url: 1,
								openType: `navigateBack`
							})
						}, 1000)
					},
					// 预约
					async toOrder(index) {
						let {
							is_work = 0
						} = this.detail
						if (!is_work) {
							this.$util.showToast({
								title: `该${this.$t('action.attendantName')}未上班`
							})
							return
						}
						let {
							id: service_id,
						} = this.serviceList[index]
						let {
							id: coach_id
						} = this.options
						if (this.lockTap) return;
						this.lockTap = true;
						try {
							await this.$api.order.addCar({
								service_id,
								coach_id,
								num: 1,
								is_top: 1,
								coach_service: 1
							})
							this.lockTap = false
							let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`
							this.$util.goUrl({
								url
							})
						} catch (e) {
							this.lockTap = false
						}
					},
					toShowHide(key) {
						this.detail[key] = !this.detail[key]
						this.$nextTick(() => {
							this.changeScroll()
						})
					},
					toComment() {
						this.$refs.technician_list_popup.toShowPopup(this.detail, 'message')
					},
					toPreviewImage(index) {
						let urls = this.detail.self_img
						// #ifdef APP-PLUS 
						if (plus.os.name == 'Android' && plus.navigator.checkPermission(
								'android.permission.WRITE_EXTERNAL_STORAGE') === 'undetermined') {
							this.$refs.preview_image_item
								.previewImage({
									current: urls[index],
									urls
								})
						} else {
							this.$util.previewImage({
								current: urls[index],
								urls
							})
						}
						// #endif
						// #ifndef APP-PLUS
						this.$util.previewImage({
							current: urls[index],
							urls
						})
						// #endif 
					},
					goInfo() {
						let {
							merchant_switch_show,
							plugAuth = {},
						} = this.configInfo

						let {
							store_id,
							admin_id,
							merchant_name
						} = this.detail
						let url = merchant_switch_show && admin_id && merchant_name ?
							`/user/pages/merchant-info?id=${admin_id}` : `/shopstore/pages/detail?id=${store_id}`
						this.$util.goUrl({
							url
						})
					},
					changeBanner(index) {
						this.bannerIndex = index
					},
					bannerChange(index) {
						this.scrollType = this.current > index ? 'right' : 'left'
						this.bannerIndex = index == 0 ? 0 : 1
						this.current = index
					},
					tapChange(item) {
						this.$util.previewImage({
							current: item,
							urls: this.detail.self_img
						})
					},
					toContact() {
						let {
							hide_admin_mobile,
							mobile,
							im_type,
							qywx_company_id,
							qywx_kid
						} = this.configInfo
						if (im_type == 3) {
							// #ifdef H5
							window.location.href = qywx_kid
							// #endif
							// #ifndef H5 
							// #ifdef MP-WEIXIN 
							try {
								wx.openCustomerServiceChat({
									extInfo: {
										url: qywx_kid
									},
									corpId: qywx_company_id,
									fail(res) {
										uni.showToast({
											title: res.errorMsg,
											icon: 'none'
										})
									}
								})
							} catch (e) {
								this.$util.showToast({
									title: `请更新微信版本`
								})
							}
							// #endif
							// #ifdef APP-PLUS
							let wechat = null
							plus.share.getServices(res => {
								wechat = res.find(i => i.id === 'weixin')
								if (wechat) {
									wechat.openCustomerServiceChat({
										corpid: qywx_company_id,
										url: qywx_kid
									}, err => {
										uni.showToast({
											title: err.errorMsg
										})
									})
								} else {
									uni.showToast({
										title: '当前环境不支持微信操作',
										icon: 'none'
									})
								}
							}, function() {
								uni.showToast({
									title: '获取服务失败，不支持该操作',
									icon: 'none'
								})
							})
							// #endif
							// #endif
							return
						}

						let url = mobile
						// #ifdef APP-PLUS
						if (plus.os.name == 'Android' && plus.navigator.checkPermission(
							'android.permission.CALL_PHONE') ===
							'undetermined') {
							this.$refs.app_check_item.open()
						} else {
							this.$util.goUrl({
								url,
								openType: 'call'
							})
						}
						// #endif
						// #ifndef APP-PLUS
						this.$util.goUrl({
							url,
							openType: 'call'
						})
						// #endif
					},
					async toCollect() {
						let {
							id,
							is_collect,
							collect_num
						} = this.detail
						let methodModel = is_collect ? 'delCollect' : 'addCollect'
						await this.$api.mine[methodModel]({
							coach_id: id
						})
						this.$util.showToast({
							title: is_collect ? '取消成功' : '收藏成功'
						})
						this.detail.is_collect = is_collect == 1 ? 0 : 1
						this.detail.collect_num = is_collect == 1 ? collect_num - 1 :
							collect_num + 1
						this.$util.back()
					},
					async changeScroll() {
						const query = uni.createSelectorQuery().in(this);
						query.select('#box').boundingClientRect(res => {
							console.log(res, '=========> #box')
							this.scroll[0] = res ? Math.floor(res.height) + 54 : 0
						}).exec();
						if (this.app_model_type != 1) {
							query.select('#scroll1').boundingClientRect(res => {
								this.scroll[1] = res ? this.scroll[0] * 1 + Math.floor(res.height) + 10 : this
									.scroll[0] * 1 + 10
							}).exec();
						}
					},
					async handerTabChange(index) {
						//let scrollTop = this.scroll[index] - 50
						// await uni.pageScrollTo({
						// 	scrollTop,
						// 	duration: 0
						// })
						this.$nextTick(() => {
							this.activeIndex = index
						})
					},
				}
		}
</script>


<style lang="scss">
	.technician-info {
		.cover-img {
			width: 750rpx;
			height: 417rpx;
		}


		.like-label {
			width: 42rpx;
			height: 42rpx;
			background: #EFEFEF;

			.iconfont {
				font-size: 24rpx;
				margin-top: 5rpx;
			}
		}

		.service-label {
			min-width: 88rpx;
			height: 32rpx;
			padding: 0 10rpx;
			color: #EBDDB1;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
		}

		.time-label {

			.near-text {
				width: 100rpx;
				height: 33rpx;
				background: #F5F5F5;
				border-radius: 3rpx 0 0 3rpx;
			}

			.near-time {
				width: 66rpx;
				height: 33rpx;
				border-radius: 0 3rpx 3rpx 0;

				.bg {
					opacity: 0.1;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
					border-radius: 0 3rpx 3rpx 0;
				}
			}
		}

		.icondianpu {
			margin-right: 6rpx;
		}

		// .iconpingfen1 {
		// 	font-size: 24rpx;
		// 	background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
		// }

		.star-text {
			height: 26rpx;
			color: #FF9519;
			margin-left: 6rpx;
		}

		.line {
			width: 1rpx;
			height: 11rpx;
			background: #979797;
			margin: 0 18rpx;
		}

		.introduce-info {
			width: 690rpx;
			background: #F9F9F9;
		}

		.zhengshu-img {
			width: 37rpx;
			height: 40rpx;
		}

		.picture-list {
			white-space: nowrap;
			width: 690rpx;

			.picture-item {
				width: 122rpx;
				margin-left: 20rpx;
				display: inline-block;

				.cover {
					width: 122rpx;
					height: 122rpx;
				}
			}

			.picture-item:nth-child(1) {
				margin-left: 0;
			}
		}

		.comment-item {
			.avatar {
				width: 52rpx;
				height: 52rpx;
				background: #f4f6f8;
			}

			.iconpingfen1 {
				font-size: 28rpx;
				margin-right: 5rpx;
				font-size: 28rpx;
			}
		}

		// 达人详情
		.ti-box {
			border-radius: 24rpx 24rpx 0 0;
			z-index: 9;
			margin-top: -80rpx;
			position: relative;
			padding-bottom: 25rpx;

			.ti-box-bg {
				height: 290rpx;
				width: 690rpx;
				left: 0;
				top: 0;
			}

			.h40 {
				height: 40rpx;
				line-height: normal;
			}

			.ti-box-num {
				padding-top: 50rpx;
			}

			.ti-box-head {
				border-radius: 24rpx 24rpx 0 0;
				padding-top: 15rpx;
			}

			.ti-box-header {
				width: 136rpx;
				height: 136rpx;
				border-radius: 136rpx;

				image {
					width: 123rpx;
					height: 123rpx;
					border-radius: 123rpx;
				}
			}

			.ti-basic {
				padding-top: 25rpx;
			}

			.ti-content {
				padding-left: 16rpx;
			}

			.min94 {
				min-width: 94rpx;
			}

			.age-bg {
				width: 100%;
				height: 40rpx;
				border-radius: 40rpx;
				opacity: 0.1;
				top: 0;
				left: 0;
			}

			.ti-status {
				height: 40rpx;
				padding: 0 15rpx;
				border-radius: 40rpx;
			}

			.ti-time {
				padding: 0 13rpx;
			}
		}

		.count-list {
			padding-bottom: 25rpx;
			padding-top: 22rpx;

			.flex-column {
				// width: 25%;
				padding: 0 60rpx;

				.text {
					font-size: 20rpx;
					color: #B1B1B1;
				}
			}
		}

		.user-info-item {
			flex-direction: column;
			padding: 6rpx 10rpx 8rpx 10rpx;
			line-height: 1;
			display: inline-block;
			transform: rotate(360deg);
		}

		.ti-certificate {
			padding-top: 16rpx;

			.ti-certificate-item {
				height: 40rpx;
				padding: 0 10rpx 0 33rpx;
				color: #8B3A02;
				background-color: #FDEDD6;
				border-radius: 4rpx;
				margin: 10rpx 27rpx 10rpx 10rpx;
			}

			.ti-certificate-icon {
				left: -10rpx;
				width: 37rpx;
				height: 44rpx;
			}
		}

		.ti-store-item {
			.ti-store-icon {
				width: 30rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}

		.ti-dynamics {
			height: 166rpx;
			padding: 26rpx 30rpx;

			.ti-dynamics-bg {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}

			.ti-dynamics-title {
				width: 270rpx;
				height: 51rpx;
			}

			.ti-dynamics-text {
				width: 275rpx;
				height: 24rpx;
				margin-left: -137rpx;
				margin-top: -17rpx;
				left: 50%;
				top: 50%;
			}
		}

		.ti-user-introduce {
			.ti-user-title {
				height: 90rpx;
			}

			.ti-user-cont {
				background: #F7F8FA;
				border-radius: 12rpx;
				line-height: 40rpx;
			}

			.ti-user-more {
				right: 30rpx;
				bottom: 32rpx;
			}
		}

		.item-label {
			min-width: 168rpx;
			height: 68rpx;
			padding: 0 20rpx;
			color: #4A4A4A;
			background: #F6F7F8;
			border-radius: 34rpx;
		}

		.item-label.mini {
			min-width: 120rpx;
			height: 48rpx;
		}

		.item-label.abs {
			opacity: 0.1;
			border-radius: 34rpx;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
		}

		.switch-banner {
			background: rgba(0, 0, 0, 0.6);
			border-radius: 56rpx;
			padding: 4rpx;
			z-index: 99;
			top: 30rpx;

			.banner-item-text {
				min-width: 92rpx;
				height: 53rpx;
				padding: 0 10rpx;
				border-radius: 53rpx;
			}
		}

		.icon-right-follow {
			top: 30rpx;
			right: 30rpx;
			height: 53rpx;
			width: 53rpx;
			z-index: 99;
		}

		.footer-box {
			height: 112rpx;

			.collect-btn {
				width: 329rpx;
				height: 85rpx;
			}

			.contact {
				width: 62rpx;
				height: 62rpx;
				border-radius: 62rpx;
				box-shadow: 0px 0px 6px 3px rgba(220, 220, 220, 1);
			}
		}

		.service-list-4 {
			background: linear-gradient(#fff, rgba(255, 255, 255, 0));
		}

		.list-message {
			.item-avatar {
				width: 52rpx;
				height: 52rpx;
				background: #f4f6f8;
			}

			.iconyduixingxingshixin {
				font-size: 28rpx;
				margin-right: 5rpx;
				font-size: 28rpx;
			}
		}

		.nav-list {
			position: sticky;
			top: -1px;
			z-index: 999;

			.nav-item {
				margin-right: 72rpx;
				color: #777777;
			}

			.nav-line {
				width: 108rpx;
				height: 3px;
				background: transparent;
				bottom: -14rpx;
				border-radius: 3px;
				left: 50%;
				margin-left: -58rpx;
			}
		}
	}
	.ti-box-top{
		border-radius: 30rpx 30rpx 0 0;
	}
	.count-list--total-top{
		display: flex;
		align-items: center;
	}
	.count-list-top{
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}
	.line-top{
		width: 100%;
		height: 2rpx;
		background: #EDEDED;
	}
	.text-top{
		padding: 0 20rpx;
		font-size: 22rpx;
		color: #566357;
	}
	.dangan-top{
		width: 100%;
		height: 122rpx;
		padding: 20rpx;
	}
	.dangan-top img{
		width: 100%;
		height: 100%;
	}
	.yuyue-top{
		height: 80rpx;
		margin: 0 20rpx;
		border-radius: 40rpx;
		border: 2rpx solid #DDDDDD;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.yuyue-top-img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}
	.zuizao{
		font-size: 24rpx;
		color: #333333;
		font-weight: 500;
		margin-right: 16rpx;
	}
	.keyueshijian{
		font-size: 24rpx;
		color: #FF6A53;
		font-weight: 500;
	}
	.count-list-text-top{
		font-size: 24rpx;
		color: #000000;
	}
	.pingfen{
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.pingfen-img{
		width: 252rpx;
		height: 44rpx;
		position: relative;
	}
	.pingfen-img img{
		width: 100%;
		height: 100%;	
	}
	.pingfen-text{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 12rpx;
		color: #fff;
	}
	.isIcon{
		margin-right: 20rpx;
	}
	.isIcon-img{
		width: 86rpx;
		height: 28rpx;
		position: relative;
	}
	.isIcon-img img{
		width: 100%;
		height: 100%;	
	}
	.isIcon-text{
		position: absolute;
		top: 5rpx;
		right: 12rpx;
		font-size: 18rpx;
		color: #fff;
	}
	.juli{
		display: flex;
		align-items: center;
	}
	.juli-img{
		width: 32rpx;
		height: 32rpx;
	}
	.juli-img img{
		width: 100%;
		height: 100%;	
	}
	.ti-content-top{
		display: flex;
		justify-content: space-between;
	}
	.w-full{
		width: 100%;
	}
	.pingjia-left{
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(0,0,0,0.8);
	}
	.tags-item{
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
		color: #BE6C15;
		margin-right: 20rpx;
		background: #FBEFE3;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>